<!--
 * @Description:
 * @Author: 猪脚饭
 * @Date: 2022-11-16 08:28:45
 * @LastEditors: Xeni
 * @LastEditTime: 2022-11-17 21:23:03
-->
<template>
  <div class="detail">
    <div class="w">
      <PageTools>
        地产详情
      </PageTools>
      <el-card>
        <h1>{{category.title}}</h1>
        <el-row :gutter="20" class="big-box">
          <!-- 左侧布局 -->
          <el-col :span="14">
            <div class="grid-content bg-purple left">
              <div class="left-box">
                <img v-imgError class="picture" :src="category.image" alt="">
                <!-- <img class="picture" src="https://img1.baidu.com/it/u=3940472009,3296903530&fm=253&fmt=auto&app=138&f=JPEG?w=693&h=500" alt=""> -->
              </div>
            </div>
          </el-col>
          <!-- 右侧布局 -->
          <el-col :span="10">
            <div class="grid-content bg-purple right">
              <!-- 右上 -->
              <div class="right-top" v-if="category.photos && category.photos.length > 0">
                <div class="right_item" v-for="(item,index) in category.photos" :key="index">
                  <img v-imgError :src="category.photos[index]" alt="">
                </div>
              </div>
              <div class="right-top" v-else>
                <div class="right_item">
                  <img src="https://img1.baidu.com/it/u=3940472009,3296903530&fm=253&fmt=auto&app=138&f=JPEG?w=693&h=500" alt="">
                </div>
                <div class="right_item">
                  <img src="https://t7.baidu.com/it/u=228112714,3478470625&fm=193&f=GIF" alt="">
                </div>
                <div class="right_item">
                  <img src="https://t7.baidu.com/it/u=2822224030,4268528040&fm=193&f=GIF" alt="">
                </div>
                <div class="right_item">
                  <img src="https://t7.baidu.com/it/u=3973911877,2047076720&fm=193&f=GIF" alt="">
                </div>
              </div>
              <h4>{{category.price}}元</h4>
              <!-- 右下 -->
              <!-- 高德地图 -->
              <div class="right-bottom">
                <div id="myMap"></div>
              </div>
            </div>
          </el-col>
        </el-row>
        <p>{{category.desc}}</p>
      </el-card>
    </div>
  </div>

</template>

<script>
import { getCategoryById } from '@/api/category'
// 导入高德地图
// import { AMapManager } from 'vue-amap'
import AMapLoader from '@amap/amap-jsapi-loader'

export default {
  name: 'DetailIndex',
  props: ['id'],
  watch: {
    id() {
      this.getCategoryById()
    }
  },
  data() {
    return {
      category: {},
      map: null
    }
  },
  mounted() {
    AMapLoader.load({
      key: '84a9ab2633e4b5411bb144f7f0459773', // 申请好的Web端开发者Key，首次调用 load 时必填
      version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    })
      .then(AMap => {
        this.map = new AMap.Map('myMap')
      })
      .catch(e => {
        console.log(e)
      })
  },
  created() {
    this.getCategoryById()
  },
  methods: {
    // 根据id获取房产详情
    async getCategoryById() {
      const res = await getCategoryById(this.id)
      this.category = res
    }
  },
  beforeRouteLeave(to, from, next) {
    from.meta.top = window.scrollY
    next()
  }
}
</script>

<style lang="scss" scoped>
.detail {
  height: 100%;
  // width: 100%;
}
.icon-ico {
  color: orange;
}
.el-card {
  margin-top: 15px;
  margin-bottom: 15px;
  .big-box {
    height: 550px;
  }
  .left {
    display: flex;
    height: 550px;
    .left-box {
      flex: 1;
      .picture {
        width: 100%;
        height: 100%;
      }
    }
  }
  .right {
    display: flex;
    flex-direction: column;
    height: 550px;
    // background-color: #f0f2f4;
    .right-top {
      flex: 1;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-content: flex-start;
      padding: 70px;
      padding-bottom: 0px;
      padding-top: 10px;
      border: 1px dashed rgb(188, 186, 186);
      .right_item {
        flex: 1;
        width: calc((100% - 5px) / 2);
        min-width: calc((100% - 5px) / 2);
        max-width: calc((100% - 5px) / 2);
        height: 100px;
        margin: 0px 5px 5px 0;
        padding-right: 10px;
        padding-top: 10px;
        &:nth-child(2n) {
          margin-right: 0;
        }
      }
    }
    h4 {
      height: 50px;
      margin: 0 auto;
      color: orange;
    }
    .right-bottom {
      height: 250px;
      margin-top: 10px;
      .address {
        width: 100%;
        height: 100%;
        vertical-align: middle; //消除图片与容器之间的几个像素
        border-radius: 10px;
      }
    }
  }
  p {
    margin-top: 30px;
    border-top: 1px solid #ebeef5;
    padding-top: 20px;
    font-size: 20px;
  }
  img {
    width: 100%;
    height: 100%;
  }
}
#myMap {
  width: 100%;
  height: 100%;
}
</style>
